<template>
  <div>
    <router-link to="/home" v-slot="props" custom>
      <!-- <nav-bar title="我是title"></nav-bar> -->

      <!-- props: href 跳转的链接 -->
      <!-- props: route对象  -->
      <!-- props: navigate 导航函数  -->
      <!-- props: isActive 是否当前处于活跃的状态  -->
      <!-- props: isExactActive 是否当前处于精确的活跃的状态  -->
      <button @click="props.navigate">{{ props.href }}</button>
      <!-- <p>{{ props.route }}</p> -->
      <span :class="{ active: props.isActive }">{{ props.isActive }}</span>
      <span :class="{ active: props.isActive }">{{ props.isExactActive }}</span>
    </router-link>
    <router-link to="/about" active-class="pengfan-active">关于</router-link>
    <router-link to="/user/pengfan/id/111" active-class="pengfan-active"
      >用户</router-link
    >
    <router-link to="/category" active-class="pengfan-active">分类</router-link>
    <button @click="jumpToAbout">关于</button>
    <button @click="forwardOneStep">前进一步</button>
    <router-view v-slot="props">
      <!-- <transition name="pengfan"> -->
        <component :is="props.Component"></component>
      <!-- </transition> -->
    </router-view>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import NavBar from "./components/NarBar.vue";
export default {
  name: "App",
  components: {
    NavBar,
  },
  methods: {
    // jumpToAbout() {
    //   this.$router.push("/about");
    // },
  },

  setup() {
    const router = useRouter();
    const jumpToAbout = () => {
      // router.push("/about");
      router.push({
        // path: "/about",
        // query: {
        //   name: "pengfan",
        //   age: 18,
        // },
      });
    };

    const forwardOneStep = () => {
      console.log("这行了");
      router.go(1);
      router.go(-1);
      router.forward();
      router.back();
    };

    return {
      jumpToAbout,
      forwardOneStep,
    };
  },
};
</script>

<style scoped>
.pengfan-active {
  color: red;
}
.pengfan-enter-from,
.pengfan-leave-to {
  opacity: 0;
}

.pengfan-enter-active,
.pengfan-leave-active {
  transition: opacity 1s ease;
}
</style>
